@import 'variables';
@import 'root';
$active: #ffa32f;

ul,
ol {
    margin    : 0;
    padding   : 0;
    list-style: none;
}

.click {
    cursor: pointer;
}

.ling-icon {
    display   : inline-block;
    width     : 20px;
    height    : 20px;
    background: transparent center/contain no-repeat;
}

.ling-flex {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
}

.ling-fullWidth {
    display: block;
    width  : 100%;
}

.ling-clearFloat {
    &:after {
        content: '';
        display: block;
        clear  : both;
    }
}

.ling-linearButton {
    background   : linear-gradient(29deg, rgba(122, 197, 239, 1) 0%, rgba(219, 231, 255, 1) 100%, rgba(219, 242, 255, 1) 100%);
    box-shadow   : 0px 6px 20px rgba(122, 197, 239, 0.5);
    opacity      : 1;
    border-radius: 40px;
    text-align   : center;
    color        : #fff;
    font-size    : 14px;
}

.task_cost_btn {
    background: none;
    box-shadow: none;
    border    : 1px solid rgba(122, 197, 239, 1);

    span {
        color: rgba(122, 197, 239, 1) !important;
    }
}

.ling-linearPinkButton {
    background   : linear-gradient(29deg, rgba(255, 111, 137, 1) 0%, rgba(255, 114, 139, 1) 0%, rgba(255, 211, 219, 1) 100%, rgba(219, 242, 255, 1) 100%);
    box-shadow   : 0px 6px 20px rgba(255, 111, 137, 0.2);
    opacity      : 1;
    border-radius: 40px;
    text-align   : center;
    color        : #fff;
    font-size    : 14px;
}

.ling-flexBtn {
    width         : 100%;
    position      : fixed;
    bottom        : 14px;
    display       : flex;
    flex-direction: column;
    align-items   : center;

    section {
        display        : flex;
        flex-direction : column;
        justify-content: center;

        span {
            color: white;
        }

        .blue-color {
            color: #7ac5ef;
        }
    }

    span {
        font-size : 14px;
        color     : #7ac5ef;
        text-align: center;
    }

    .have_task_detail_btn {
        width        : 175px;
        height       : 45px;
        line-height  : 45px;
        display      : inline-block;
        color        : white;
        margin-bottom: 20px;
    }
}

.ling-pinkButton {
    padding      : 2px 10px;
    background   : rgba(255, 111, 137, 0.2);
    color        : #FF6F89;
    font-size    : 14px;
    border-radius: 4px;

    i {
        font-style: normal;
    }
}

.no-task {
    text-align: center;
    font-size : 14px;
    color     : #333333;
}

.ling-top-text {
    background: white;

    h2 {
        font-size    : 16px;
        line-height  : 52px;
        color        : #333;
        font-weight  : normal;
        text-align   : center;
        border-bottom: solid 1px #dddddd;
        background   : white;
    }
}

.ling-mask {
    background-color: rgba(0, 0, 0, 0.5);
    width           : 100%;
    height          : 100%;
}

.animated {
    -webkit-animation-duration : 1s;
    animation-duration         : 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode        : both;
}

.ling-multi-ellipsis-3 {
    display           : -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow          : hidden;
}

.improvement_btn {
    width      : 155px;
    height     : 45px;
    line-height: 45px;
    position   : absolute;
    left       : 50%;
    margin-left: -77px;
    font-size  : 14px;
    bottom     : -100px
}

@-webkit-keyframes bounceIn {

    from,
    20%,
    40%,
    60%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function        : cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity          : 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform        : scale3d(0.3, 0.3, 0.3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform        : scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform        : scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity          : 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform        : scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform        : scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity          : 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform        : scale3d(1, 1, 1);
    }
}

@keyframes bounceIn {

    from,
    20%,
    40%,
    60%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function        : cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity          : 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform        : scale3d(0.3, 0.3, 0.3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform        : scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform        : scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity          : 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform        : scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform        : scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity          : 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform        : scale3d(1, 1, 1);
    }
}

.bounceIn {
    -webkit-animation-duration: 0.75s;
    animation-duration        : 0.75s;
    -webkit-animation-name    : bounceIn;
    animation-name            : bounceIn;
}

.business_license {
    img {
        width: 100vw;
    }
}

@-webkit-keyframes shake {

    from,
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform        : translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform        : translate3d(-10px, 0, 0);
    }

    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform        : translate3d(10px, 0, 0);
    }
}

@keyframes shake {

    from,
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform        : translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform        : translate3d(-10px, 0, 0);
    }

    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform        : translate3d(10px, 0, 0);
    }
}

@-webkit-keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform        : scale(1);
    }

    14% {
        -webkit-transform: scale(1.1);
        transform        : scale(1.1);
    }

    28% {
        -webkit-transform: scale(1);
        transform        : scale(1);
    }

    42% {
        -webkit-transform: scale(1.1);
        transform        : scale(1.1);
    }

    70% {
        -webkit-transform: scale(1);
        transform        : scale(1);
    }
}

@keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform        : scale(1);
    }

    14% {
        -webkit-transform: scale(1.1);
        transform        : scale(1.1);
    }

    28% {
        -webkit-transform: scale(1);
        transform        : scale(1);
    }

    42% {
        -webkit-transform: scale(1.1);
        transform        : scale(1.1);
    }

    70% {
        -webkit-transform: scale(1);
        transform        : scale(1);
    }
}

.heartBeat {
    -webkit-animation-name           : heartBeat;
    animation-name                   : heartBeat;
    -webkit-animation-duration       : 1.8s;
    animation-duration               : 1.8s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function        : ease-in-out;
}

.shake {
    -webkit-animation-name: shake;
    animation-name        : shake;
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count        : infinite;
}


/**toast公共样式*/

.van-popup {
    // background-color: transparent;
    width: 100%;

    .play-list-container {
        background-color       : white;
        border-top-left-radius : 20px;
        border-top-right-radius: 20px;
        width                  : 100%;

        .list-header h3 {
            font-size     : 14px;
            color         : black;
            margin        : 0;
            text-align    : center;
            padding-bottom: 18px;
            padding-top   : 18px;
        }

        hr {
            width           : 100%;
            margin          : 0;
            background-color: rgb(238, 238, 238);
            height          : 1px;
            /*no*/
            border          : none;
        }

        .list-container {
            overflow      : scroll;
            padding-bottom: 10px;
            max-height    : 358px;
        }

        .list-item {
            display       : flex;
            flex-direction: column;
            padding       : 0px 10px;
        }

        .list-content {
            display       : flex;
            flex-direction: row;
            align-items   : center;

            img {
                margin-right: 10px;
                width       : 14px;
                height      : 14px;
            }

            p {
                padding  : 17px 0;
                margin   : 0;
                font-size: 14px;
                color    : rgb(22, 35, 60);
            }

            .p-playing {
                font-size: 14px;
                color    : rgb(255, 163, 47);
            }
        }
    }

    .list-close {
        font-size       : 18px;
        text-align      : center;
        width           : 100%;
        height          : 45px;
        color           : rgb(38, 38, 38);
        line-height     : 45px;
        background-color: rgb(245, 245, 245);
    }
}

.van-toast.van-toast--text.van-toast--middle {
    width    : auto;
    min-width: 0;
}


/*懒加载图片
分为正常尺寸/小尺寸 80%的标签宽/大尺寸 240px
最好用背景图方式加载
<div v-lazy:background-image="src" @click="onItemClick" class="lazy-img-larger...."></div>
*/

[lazy='error'],
[lazy='loading'] {
    background-size : 100px !important;
    background-color: #f6f6f6 !important;
}

.lazy-img-larger {

    &[lazy='loading'],
    &[lazy='error'] {
        background-size: 186px !important;
    }
}

.lazy-img-most {

    &[lazy='loading'],
    &[lazy='error'] {
        background-size: 254px !important;
    }
}